<template>
	<view style="font-size:28rpx">
		<u-navbar :autoBack="true" leftIconColor="#ffffff" title="拜访记录" :placeholder="true" bgColor="#3ACD90"  :titleStyle="{ color: '#FFFFFF', fontSize: '30rpx' }"></u-navbar>
		
		<view class="pt30" style="background-color: #ffffff;padding-bottom:30rpx ;">
			<view  style="display: flex;justify-content: space-around;align-items: center;">
				<view class="flex-center" style="display: flex;flex-direction: column;">
					<view style="color:#7D7D7D ;">拜访总数</view>
					<view class="fbold" style="font-size: 40rpx;">{{visitInfo.count}}</view>
				</view>
				
				<view class="flex-center" style="display: flex;flex-direction: column;">
					<view style="color:#7D7D7D ;">本月拜访数</view>
					<view class="fbold" style="font-size: 40rpx;">{{visitInfo.month_count}}</view>
				</view>
				
				<view class="flex-center" style="display: flex;flex-direction: column;">
					<view style="color:#7D7D7D ;">本月成交数</view>
					<view class="fbold" style="font-size: 40rpx;">{{visitInfo.month_deal_count}}</view>
				</view>
				
			</view>
			<view style="display: flex;padding:0 30rpx;justify-content: space-around">
				<view class="flex-center" style="display: flex;justify-content: space-between;">
					<view>拜访时间</view>
					<view style="width: 540rpx;">
						<uni-datetime-picker @change="change" v-model="range" type="daterange" @maskClick="maskClick" rangeSeparator="至" />
					</view>
				</view>
				<!-- <view style="display: flex;" class="flex-center">
					<view style="width: 80rpx">
						店铺名称
					</view>
					<view>
						<uni-easyinput class="uni-mt-5" trim="all" v-model="value" placeholder="请输入内容" @input="input"></uni-easyinput>
					</view>
				</view>
				<view style="display: flex;" class="flex-center">
					<view style="width: 80rpx">
						拜访时间
					</view>
					<view @click="dateShow=true">
						<uni-easyinput  disabled class="uni-mt-5" trim="all" v-model="value" placeholder="请输入内容" @input="input"></uni-easyinput>
					</view>
				</view> -->
			</view>
		</view>
		
		<view class="cell-box-center" v-for="item in visitList">
			<view class="mtlr30 cell-box" style="display: flex;justify-content: space-between;">
				<view class="fbold">{{item.store_name}}</view>
			</view>
			<view class="mtlr30" style="display: flex;justify-content: space-between;">
				<view style="font-size:24rpx;">拜访性质:  {{ getResult(item.type)}}</view>
				<view style="display: flex" class="flex-center">
					<view style="font-size:24rpx;">是否成交</view>
					<view>
						<u-button type="primary" color="red" text="营业中" :plain="true" size="mini"></u-button>
					</view>
				</view>
			</view>
			<view class="mtlr30" style="font-size:24rpx;display: flex;justify-content: space-between;">
				<view>随行商务: {{ getPartner(item.partner)}} </view>
			</view>
			<view class="mtlr30" style="font-size:24rpx;display: flex;justify-content: space-between;">
				<view>拜访结果: {{item.content}} </view>
			</view>
		</view>
		
		<u-datetime-picker
		    :show="dateShow"
		    v-model="dateValue"
		    mode="date"
			@confirm="dataConfirm"
			@cancel="dataCancel"
		></u-datetime-picker>
		
		
	</view>
</template>

<script>
import dayjs from 'dayjs';
import {
	dataDetail,
	visitLogList
} from "@/common/apis/other.js"
	
export default{
	data(){
		return{
			visitInfo:{},
			dateShow:false,
			dateValue:"",
			visitList:[],
			range:"",
			startTime:'',
			endTime:'',
		}
	},
	computed:{
		
	},
	onLoad() {
		dataDetail().then( res => {
			console.log('resssss',res)
			if(res.status == 200){
				this.visitInfo = res.data.person.visit
			}else{
				uni.showToast({
					title: '获取信息失败',
					duration: 2000
				});
			}
		})
		visitLogList({limit:30}).then(res=>{
			console.log('res',res)
			if(res.status == 200){
				this.visitList = res.data.list
			}
		})
	},
	methods:{
		getResult(value) {
			let selectRange = [
			  { value: 0, text: "首次" },
			  { value: 1, text: "跟进" },
			  { value: 2, text: "服务商家" },
			]
			const item = selectRange.find(item => item.value === value);
			return item ? item.text : null;
		},
		getPartner(partners){
			// 使用 map 方法提取 real_name 值
			const realNames = partners.map(partner => partner.real_name);
			
			// 使用 join 方法将 real_name 值连接成一个字符串
			const realNamesString = realNames.join(", ");
			return realNamesString
		},
		dataConfirm(){
			console.log('confirm',this.dateValue)
			this.dateShow = false
			
			
		},
		dataCancel(){
			console.log('cancel')
			this.dateShow = false
		},
		change(e){
			console.log(e)
			
			let dateParams = e[0] .replace(/-/g, '/') + '-'+ e[1].replace(/-/g, '/')
			visitLogList({date:dateParams,limit:30}).then(res=>{
				console.log('res',res)
				if(res.status == 200){
					this.visitList = res.data.list
				}
			})

		}
		
	}
}
</script>

<style scoped>
	
	/deep/ .is-disabled {
		background-color: #ffffff !important;
	}
	.cell-box-center{
		background-color: #ffffff;
		margin-top:30rpx;
		border-radius:20rpx ;
		padding-bottom: 20rpx;
	}
	.cell-box{
		padding: 20rpx;
		display: flex;
		align-items: center;
	}
	.cell-box-title{
		margin-left:30rpx;
		font-size:30rpx
	}
	
	.vertical-divider {
		width: 100%;
		height: 2rpx;
		background-color: #D8D8D8;
	
	}
</style>